<!--
 * @Descripttion: 
 * @version: 
 * @Author: zhangchongjie
 * @Date: 2022-06-16 10:16:08
 * @LastEditors: zhangchongjie
 * @LastEditTime: 2022-06-17 17:19:44
 * @FilePath: \workspace-y9boot-9.5-vuee:\workspace-y9boot-9.6-vue\y9vue-kernel-dcat-style\src\views\org\comps\baseInfoForm\groupForm.vue
-->
<template>
	
	<el-descriptions column="1" border>
		<el-descriptions-item>
			<template #label>
				<span>{{ $t('用户组名称') }}</span>
				<span v-if="isEditState" class="custom-validator-symbol">*</span>
			</template>
			<el-input ref="nameRef" v-if="isEditState" v-model="groupForm.name" v-elInputCheck="{message: $t('请输入用户组名称')}"/>
			<span v-else>{{ currInfo.name }}</span>
		</el-descriptions-item>
		<el-descriptions-item :label="$t('唯一标识')" span="2" v-if="!isAdd">
			<span>{{ currInfo.id }}</span>
		</el-descriptions-item>
		<el-descriptions-item :label="$t('用户组描述')" span="3">
			<el-input type="textarea" :rows="3" v-if="isEditState" v-model="groupForm.description" />
			<span v-else>{{ currInfo.description }}</span>
		</el-descriptions-item>
	</el-descriptions>
	
	
</template>

<script lang="ts" setup>
	import { $keyNameAssign, } from '@/utils/object.ts'
	const props = defineProps({
		isAdd: {//是否为添加模式，添加模式有些字段不需要显示
			type: Boolean,
			default: false,
		},
		isEditState: {//是否为编辑状态
			type: Boolean
		},
		currInfo: {//当前信息
			type: Object,
			default: () => { return {} }
		}
	})
	
	const data = reactive({
		
		groupForm: {//新增或编辑用户组表单
			id:"",
			parentId:props.currInfo.id,
			name: "",//用户组名称
			tabIndex: null, // 排序
			description: "",//用户组描述
		},
		nameRef:"",
	})
	
	let {
		groupForm,
		nameRef,
	} = toRefs(data);
	
	watch(
		() => props.isEditState,
		
		(newVal) => {
		
			if(newVal){//编辑状态给表单赋值
				$keyNameAssign(groupForm.value, props.currInfo);
			}
		}
	)
	
	defineExpose({
		groupForm,
		validForm
	})
	

	async function validForm() {
		if (!groupForm.value.name) {
			nameRef.value.focus();
			setTimeout(()=>{
				nameRef.value.blur()
			},0)
	
			return false;
		}
		return true;
	}

	
	
</script>

<style>
</style>